<template>
  <div>
    <a-drawer title="简历详情" :placement="'right'" :visible="visible" @close="onClose" width="50vw">
      <div class="drawer-name">
        <a-list-item-meta :description="address">
          <span slot="title">
            <span style="font-size: 18px">{{ name }}</span>
            <span class="title-s-j" v-if="sourceType === 'broker'">经纪人</span>
            <span class="title-s-n" v-if="sourceType === 'emp'">内推</span>
            <span v-if="sourceType === 'broker'">来自经纪人</span>
            <span style="color: #6a66f6" v-if="sourceType === 'broker'">{{ brokerName }}</span>
            <span v-if="sourceType === 'emp'">来自内推人</span>
            <span style="color: #32ccaa" v-if="sourceType === 'emp'">{{ brokerName }}</span>
          </span>
          <a-avatar v-if="avatar" slot="avatar" :src="avatar" />
          <a-avatar v-if="!avatar && gender === 1" slot="avatar" :src="n1" />
          <a-avatar v-if="!avatar && gender === 2" slot="avatar" :src="n2" />
        </a-list-item-meta>
        <div class="tags">
          <a-button type="primary" @click="$emit('onMsg')" v-if="status === '1'"> 安排面试 </a-button>
          <a-button
            type="danger"
            ghost
            @click="$emit('onAction', 5)"
            v-if="['1', '2', '3', '4'].includes(status)"
            style="margin-left: 10px"
          >
            不合适
          </a-button>
          <a-button @click="modalVisible = true" style="margin-left: 10px"> 转移阶段 </a-button>
        </div>
      </div>
      <div class="drawer-msg">
        <div @click="jump">
          <a-tooltip placement="top">
            <template slot="title">
              <span>{{ companyUnitsInfo.postName }}</span>
            </template>
            <div class="overflows">
              <span style="cursor: pointer">{{ companyUnitsInfo.postName }}</span>
            </div>
          </a-tooltip>

          >
          <p v-if="status === '1'">已投递</p>
          <p v-if="status === '2'">已约面</p>
          <p v-if="status === '3'">待入职</p>
          <p v-if="status === '4'">已招聘</p>
          <p v-if="status >= '5'">未通过</p>
        </div>
        <div class="desc">
          {{ companyUnitsInfo.companyUnitName }} /
          {{ companyUnitsInfo.cityName ? companyUnitsInfo.cityName.split(",")[1].split("/").join("-") : "" }}
          / {{ companyUnitsInfo.activeDelivery === 1 ? "投递人主动投递" : "投递人非主动投递" }} /
          <!-- {{ companyUnitsInfo.deliverDays === 0 ? "今天投递" : `${companyUnitsInfo.deliverDays}天前投递` }} -->
          {{ moment(gmtCreate).format("YYYY-MM-DD HH:mm:ss") }}
        </div>
      </div>
      <!-- <showResume :status="'deliveryRecord'" :companyUnitsInfo="{ talentPoolId: talentPoolId, ...companyUnitsInfo }"></showResume> -->
      <resumeDetails :status="'deliveryRecord'" :info="info"></resumeDetails>
      <!-- <resume :src="src" :upload="false" @upData="upData" /> -->
      <a-modal title="转移阶段" :visible="modalVisible" @ok="handleOk" @cancel="modalVisible = false">
        <a-select v-model="select" style="width: 100%">
          <a-select-option value="1"> 已投递 </a-select-option>
          <a-select-option value="2"> 已约面 </a-select-option>
          <a-select-option value="3"> 待入职 </a-select-option>
          <a-select-option value="4"> 已招聘 </a-select-option>
          <a-select-option value="5"> 未通过 </a-select-option>
        </a-select>
      </a-modal>
    </a-drawer>
    <interview
      :visible.sync="interviewVisible"
      :deliverRecordId="deliverRecordId"
      :talentPoolId="talentPoolId"
      :mjson="mjson"
      @onShare="onShare"
    />
  </div>
</template>
<script>
// import fTitle from "../../component/fTitle";
// import resume from "../../component/resume";
import interview from "./interview";
import { getJobSeekers, putJobSeekers, getBrokers, getprincipalNameById } from "../api";
import resumeDetails from "@/views/recruitment/talent/msg/component/showResume/resumeDetails.vue";
export default {
  components: {
    // fTitle,
    resumeDetails,
    interview
    // resume
  },
  computed: {
    info() {
      return { talentPoolId: this.talentPoolId, ...this.companyUnitsInfo, deliverRecordId: this.deliverRecordId };
    }
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    talentPoolId: {
      type: String,
      default: ""
    },
    deliverRecordId: {
      type: String,
      default: ""
    },
    companyUnitsInfo: {
      type: Object,
      default: () => {}
    },
    mjson: {
      type: Object,
      default: () => {}
    },
    status: {
      type: String,
      default: ""
    }
  },
  watch: {
    visible(v) {
      if (v) {
        this.init();
        this.onGetJobSeekers();
        this.onGetBrokers();
        this.sourceType = this.companyUnitsInfo.sourceType;
      }
    }
  },
  data() {
    return {
      interviewVisible: false,
      modalVisible: false,
      phoneV: true,
      createUserName: "",
      phone: "",
      select: "1",
      src: "",
      currentPage: 1,
      pageCount: 0,
      id: "",
      avatar: "",
      gender: "",
      name: "",
      address: "",
      skill: "",
      remark: "",
      sourceType: "",
      brokerName: "",
      gmtCreate: "",
      n1: require("@/assets/recruitment/n.png"),
      n2: require("@/assets/recruitment/n2.png")
    };
  },
  methods: {
    init() {
      this.phoneV = true;
      this.avatar = "";
      this.gender = "";
      this.createUserName = "";
      this.phone = "";
      this.name = "";
      this.address = "";
      this.remark = "";
      this.skill = "";
      this.sourceType = "";
      this.src = "";
      this.brokerName = "";
      this.gmtCreate = "";
    },
    async onGetBrokers() {
      try {
        if (!this.companyUnitsInfo.sourceId) return false;
        const { data } = await getprincipalNameById(this.companyUnitsInfo.sourceId);
        this.brokerName = data;
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    async onGetJobSeekers() {
      try {
        const { data } = await getJobSeekers(this.deliverRecordId);
        this.id = data.id;
        this.name = data.name;
        this.avatar = data.avatar;
        this.gender = data.gender;
        this.createUserName = data.createUserName;
        this.phone = data.phone;
        this.address = data.address;
        this.remark = data.remark;
        this.skill = data.skill ? data.skill.split(",") : [];
        this.src = data.annex;
        this.gmtCreate = data.gmtCreate;
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    async onSumbitPhone() {
      this.phoneV = true;
      try {
        await putJobSeekers({
          id: this.id,
          phone: this.phone
        });
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    onClose() {
      this.$emit("update:visible", false);
    },
    handleOk() {
      this.modalVisible = false;
      if (this.select === "2") {
        this.interviewVisible = true;
      } else {
        this.$emit("onAction", this.select);
      }
    },
    onShare(e) {
      this.$emit("onShare", e);
    },
    upData(e) {
      this.src = e.transformationFrontUrl;
      this.afterConversionAnnex = e.transformationResultUrl || e.transformationFrontUrl;
    },
    jump() {
      this.$router.push({ name: "managementMsg", query: { id: this.companyUnitsInfo.recruitInfoId } });
    }
  }
};
</script>
<style lang="scss" scoped>
.drawer-name {
  display: flex;
  justify-content: space-between;
  height: 80px;
  color: #767885;
  .title-s-j {
    display: inline-block;
    width: 46px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 2px;
    border: 1px solid #4686ff;
    color: #4686ff;
    font-size: 10px;
    margin: 0 10px;
  }
  .title-s-n {
    display: inline-block;
    width: 36px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 2px;
    border: 1px solid #32ccaa;
    color: #32ccaa;
    font-size: 10px;
    margin: 0 10px;
  }
}
.drawer-msg {
  width: 100%;
  height: 102px;
  background: #f4f6fa;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 500;
  padding: 16px 16px 0 16px;
  box-sizing: border-box;
  margin-bottom: 20px;
  p {
    width: 56px;
    height: 18px;
    display: inline-block;
    text-align: center;
    font-size: 12px;
    color: #d48806;
    background: #fff1b8;
    border-radius: 9px;
    margin-bottom: 16px !important;
  }
  .desc {
    font-size: 14px;
    color: #767885;
  }
}
.drawer-row {
  width: 100%;
  margin-bottom: 20px;
  font-size: 14px;
  color: #767885;
  display: flex;
  .label {
    width: 80px;
  }
  .content {
    width: 88%;
  }
}
.pdfNull {
  width: 100%;
  height: 681px;
  background: #f4f6fa;
  border-radius: 4px;
  text-align: center;
  padding-top: 100px;
}
.overflows {
  vertical-align: middle;
  display: inline-block;
  max-width: 350px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
